<template>
  <div class="nuclearMiningCount">
    <div class="label-box">一标三实核采</div>
    <div class="total-box">
      <div class="data-total">
        <div class="common-title commonColor">{{ dataObjKeys.totalKey }} :</div>
        <div class="common-value totalColor">{{ dataObj.total }}</div>
      </div>
      <div class="disposeOf disposeOfColor">
        <div class="common-title">{{ dataObjKeys.disposeOfKey }} :</div>
        <div class="common-value">{{ dataObj.disposeOf }}</div>
      </div>
      <div class="no-disposeOf no-disposeOfColor">
        <div class="common-title">{{ dataObjKeys.noDisposeOfKey }} :</div>
        <div class="common-value">{{ dataObj.noDisposeOf }}</div>
      </div>
    </div>
    <div class="count-box">
      <div class="count-view" v-for="(item, index) in cardDatas" :key="index">
        <div class="common-left">
          <div class="left">
            <div class="top-label commonColor">{{ item.statisticsKey }}</div>
            <div class="bottom-value commonVlueColor">{{ item.statisticsValue }}</div>
          </div>
          <div class="right">
            <div class="bottom-view"><el-image :src="bottomSrc"></el-image></div>
            <div class="top-view"><el-image :src="topSrc"></el-image></div>
          </div>
        </div>
        <!-- <div class="common-right">
          <div class="left">
            <div class="top-label commonColor">疑似迁出数</div>
            <div class="bottom-value commonVlueColor">3</div>
          </div>
          <div class="right">
            <div class="bottom-view"><el-image :src="bottomSrc"></el-image></div>
            <div class="top-view"><el-image :src="topSrc"></el-image></div>
          </div>
        </div> -->
      </div>
      <!-- <div class="count-view">
        <div class="common-left">
          <div class="left">
            <div class="top-label commonColor">频繁夜归数</div>
            <div class="bottom-value commonVlueColor">92</div>
          </div>
          <div class="right">
            <div class="bottom-view"><el-image :src="bottomSrc"></el-image></div>
            <div class="top-view"><el-image :src="topSrc"></el-image></div>
          </div>
        </div>
        <div class="common-right">
          <div class="left">
            <div class="top-label commonColor">昼伏夜出数</div>
            <div class="bottom-value commonVlueColor">56</div>
          </div>
          <div class="right">
            <div class="bottom-view"><el-image :src="bottomSrc"></el-image></div>
            <div class="top-view"><el-image :src="topSrc"></el-image></div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getStatisticsList } from "@/api/common/other"
export default {
  components: {},
  props: {},
  data() {
    return {
      dataObj: {
        total: 256,
        disposeOf: 254,
        noDisposeOf: 2
      },
      dataObjKeys: {
        totalKey: "数据总量",
        disposeOfKey: "已处置",
        noDisposeOfKey: "未处置"
      },
      cardDatas: [],
      topSrc: require("@/assets/img/top-bg.png"),
      bottomSrc: require("@/assets/img/bottom-bg.png")
    }
  },
  created() {
    this.getStatisticsList({
      groupName: "gather"
    })
  },
  mounted() {},
  watch: {},
  methods: {
    // 大屏数据
    getStatisticsList(params) {
      getStatisticsList(params).then((res) => {
        this.dataObj = {
          total: res.data[0].statisticsValue,
          disposeOf: res.data[1].statisticsValue,
          noDisposeOf: res.data[2].statisticsValue
        }
        this.dataObjKeys = {
          totalKey: res.data[0].statisticsKey,
          disposeOfKey: res.data[1].statisticsKey,
          noDisposeOfKey: res.data[2].statisticsKey
        }
        res.data.map((item, index) => {
          // 暂时只展示四个
          if (index > 2 && index <= 6) {
            this.cardDatas.push(item)
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.nuclearMiningCount {
  width: 100%;
  height: 100%;
  background: rgba(3, 10, 14, 0.7);
  border: 1px solid #194871;
  position: relative;
  z-index: 3;

  .label-box {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 20px;
    color: #01c2ff;
    background: #20426a;
  }

  .total-box {
    height: 50px;
    display: flex;
    align-items: center;

    .data-total,
    .disposeOf,
    .no-disposeOf {
      width: 33.3%;
      margin-left: 30px;
      display: flex;
      align-items: center;

      .common-title {
        height: 50px;
        line-height: 50px;
      }

      .common-value {
        font-size: 22px;
        margin-left: 10px;
        font-weight: 700;
      }
    }
  }

  .count-box {
    // margin-left: 30px;
    width: 100%;
    // height: calc(100% - 100px);
    height: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    .count-view {
      margin-top: 15px;
      // margin-right: 30px;
      width: 45%;
      box-sizing: border-box;
      height: 40%;
      display: flex;

      .common-left,
      .common-right {
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #00344b, #001d2f 30%);
        border: 1px solid #0e9cff;
        // margin-right: 20px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;

        .left {
          .top-label {
            margin-top: 10px;
            font-size: 13px;
          }

          .bottom-value {
            margin-top: 5px;
            font-size: 30px;
            font-weight: 700;
          }
        }

        .right {
          width: 40%;
          height: 100%;
          text-align: center;
          position: relative;

          .top-view {
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 17px);

            .el-image {
              width: 32px;
              height: 32px;
            }
          }

          .bottom-view {
            position: absolute;
            bottom: calc(50% - 25px);
            left: calc(50% - 30px);

            .el-image {
              width: 58px;
              height: 22px;
            }
          }
        }
      }
    }
  }
}

.commonColor {
  color: #a8d6ff;
}

.totalColor {
  color: #f0a205;
}

.disposeOfColor {
  color: #1dd4ff;
}

.no-disposeOfColor {
  color: #fa2808;
}

.commonVlueColor {
  color: #21e8e1;
}
</style>
